<template>
  <div class="comment">
    <div class="comment">
      <div class="submitbox">
        <h3>提交评论</h3>
        <div>
          <mt-field placeholder="评论内容" v-model="content" type="textarea" row="6"></mt-field>
          <mt-button type="primary" @click="clickPost">发表</mt-button>
        </div>
      </div>
      <div class="commentbox">
        <h3 class="line">评论详情</h3>
        <ul>
          <li v-for="(item,index) in commentList" :key="index">
            <h4 class="comment-content">{{item.content}}</h4>
            <p>
              <span class="comment-user">{{item.user_name}}</span>
              <span class="comment-time">{{item.add_time | filterTime}}</span>
              </p>
          </li>
        </ul>
      </div>
      <div class="button-group">
        <mt-button type="primary" size="large" v-if="hasMore" @click="downLoadMore">查看更多</mt-button>
        <mt-button type="danger" disabled size="large" v-else>没有更多了</mt-button>
      </div>
    </div>
  </div>
</template>
<script>
import { Toast } from 'mint-ui'
import qs from 'qs'
import { getCommentList, newsPost } from '@/api'
export default {
  data () {
    return {
      content: '', // 用来存储用户输入的评论内容
      pageIndex: 1, // 默认显示评论的第一页
      commentList: [], // 用来存储评论列表的数据
      hasMore: true // 是否加载更多
    }
  },
  props: ['id'], // 定义一个坑，专门用来接收父组件传递过来的id
  created () {
    this.initCommentList()
  },
  methods: {
    initCommentList () {
      getCommentList(parseInt(this.id), this.pageIndex)
        .then(res => {
          // console.log(res)
          let newDate = res.message // 请求回来的心数据
          let oldDate = this.commentList // 之前存有的旧数据
          // 判断，如果下一页数据不超过10条，则隐藏加载更多的按钮
          if (newDate.length < 10) {
            this.hasMore = false
          }
          this.commentList = [...oldDate, ...newDate]
        })
    },
    // 加载更多
    downLoadMore () {
      this.pageIndex += 1
      this.initCommentList()
    },
    // 点击发表
    clickPost () {
      // console.log(123)
      let postData = { content: this.content }
      // 后台需要传入的参数不是json格式的，而是表格形式的，所以需要转换
      postData = qs.stringify(postData)
      // 点击发表前要进行校验
      if (!this.content.trim()) {
        // 弹出提示框
        Toast({
          message: '请输入内容后再提交',
          iconClass: 'iconfont icon-checkbox-blank-circle-outline'
        })
        return false
      }
      newsPost(this.id, postData)
        .then(res => {
          if (res.status === 0) {
            Toast({
              message: '发表成功',
              iconClass: 'iconfont icon-checkbox-marked-circ'
            })
            // 清空输入框的内容
            this.content = ''
            // 调用初始化数据方法时先清空之前的旧数据,并将页码重置为第一页
            this.pageIndex = 1
            this.commentList = []
            this.initCommentList()
          }
        })
    }
  }
}
</script>
<style lang="scss" scoped>
  .inputbox {
  border: 1px solid #999;
}
.comment h3 {
  font-weight: bold;
  margin: 10px 0;
  font-size: 14px;
}
.line {
  border-top: 1px solid #999;
  padding-top: 10px;
}
.commentbox{
  li:not(:last-child) {
    border-bottom: 1px solid #999;
    margin: 5px 0;
  }
  p {
    font-size: 14px;
  }
  .comment-content {
    color: #999;
    font-size: 14px;
  }
}
.comment-user, .comment-time {
  font-size: 12px;
  color: #26a2ff;
}
</style>
